<template>
  <div class="class_box">
    <!-- 标题 -->
    <div class="_Mimg_box">
      <p class="_Mtxt">动物保护等级统计</p>
      <p class="_Mtxts">Animal protection level statistics</p>
    </div>
    <div class="circular_box">
      <div class="circular_S">
        <mychart
          id="circular_a"
          :option="option_a"
          width="0.7rem"
          height="0.7rem"
        ></mychart>
        <p>国家Ⅰ级</p>
      </div>
      <div class="circular_S">
        <mychart
          id="circular_b"
          :option="option_b"
          width=".7rem"
          height=".7rem"
        ></mychart>
        <p>国家Ⅱ级</p>
      </div>
      <div class="circular_S">
        <mychart
          id="circular_c"
          :option="option_c"
          width=".7rem"
          height=".7rem"
        ></mychart>
        <p>其他</p>
      </div>
    </div>
  </div>
</template>

<script>
import mychart from "../module/mychart.vue";
export default {
  components: { mychart },
  props:['animalsprotection'],
  data() {
    return {
      animaltion:this.animalsprotection,
      option_a:{},
      option_b:{},
      option_c:{},
    };
  },
  created() {
    // this.getTotal()
    // console.log(this.animaltion);
  },
  mounted() {
    this.getTotal()
  },
  methods: {
    getTotal(){
      let total = 0
      for (let key in this.animaltion) {
            total += this.animaltion[key];
          }
          this.drawbar1(total)
          this.drawbar2(total)
          this.drawbar3(total)
    },
    drawbar1(e){
      this.option_a = {
        color: ["#FCD60F", "#3999dd"],
        title: {
          text: this.animaltion.oneLevel,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#FCD60F",
            fontSize: ".17rem"
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + ":" + params.percent + " %";
          }
        },
        series: [
          {
            //   name: "Line 1",
            type: "pie",
            clockwise: false,
            radius: ["100%", "70%"],
            itemStyle: {
           
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              
            },
            emphasis: {
              scale: true, 
            },
            data: [
              {
                value:  this.animaltion.oneLevel,
                name: "占比",
                itemStyle: {
               
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  
                }
              },
              {
                name: "剩余",
                value: e-this.animaltion.oneLevel,
                itemStyle: {
                 
                    color: "rgba(255, 255, 255, 0.30)"
                  
                }
              }
            ]
          }
        ]
      }
    },
    drawbar2(e){
      this.option_b = {
        color: ["#2EFFF2", "#3999dd"],
        title: {
          text:  this.animaltion.twoLevel,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#2EFFF2",
            fontSize: ".17rem"
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + ":" + params.percent + " %";
          }
        },
        series: [
          {
            //   name: "Line 1",
            type: "pie",
            clockwise: false,
            radius: ["100%", "70%"],
            itemStyle: {
           
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              
            },
            emphasis: {
              scale: true, 
            },
            data: [
              {
                value: this.animaltion.twoLevel,
                name: "占比",
                itemStyle: {
                
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  
                }
              },
              {
                name: "剩余",
                value: e-this.animaltion.twoLevel,
                itemStyle: {
                
                    color: "rgba(255, 255, 255, 0.30)"
                  
                }
              }
            ]
          }
        ]
      }
    },
    drawbar3(e){
       this.option_c = {
        color: ["#FD51A4", "#3999dd"],
        title: {
          text: this.animaltion.otherLevel,
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#FD51A4",
            fontSize: ".17rem"
          }
        },
        tooltip: {
          formatter: function(params) {
            return params.name + ":" + params.percent + " %";
          }
        },
        series: [
          {
            //   name: "Line 1",
            type: "pie",
            clockwise: false,
            radius: ["100%", "70%"],
            itemStyle: {
            
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              
            },
            emphasis: {
              scale: true, 
            },
            data: [
              {
                value: this.animaltion.otherLevel,
                name: "占比",
                itemStyle: {
            
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  
                }
              },
              {
                name: "剩余",
                value: e-this.animaltion.otherLevel,
                itemStyle: {
               
                    color: "rgba(255, 255, 255, 0.30)"
                  
                }
              }
            ]
          }
        ]
      }
    },
  },
};
</script>
<style scoped>
@import "../../../static/newcss/myZoonclass.css";
</style>
